<template>
  <el-menu :default-active="menuModel.getId()" @select="menuModel.select">
    <el-menu-item index="all">
      {{ plugin.lang('menu.all') }}
    </el-menu-item>
    <el-menu-item index="0">
      {{ plugin.lang('menu.no') }}
    </el-menu-item>
    <el-menu-item v-for="item in menuModel.getList()" :index="item.id.toString()" :key="item.id">
      {{ item.name }}
    </el-menu-item>
    <div class="tools" v-if="!menuModel.getData()">
      <el-button type="primary" @click="form.open({})" circle plain>
        <template #icon>
          <i class="iconfont min icon-add-max"></i>
        </template>
      </el-button>
    </div>
    <div class="tools" v-else>
      <el-button @click="form.open(menuModel.getData())" circle plain>
        <template #icon>
          <i class="iconfont min icon-editor-max"></i>
        </template>
      </el-button>
      <el-popconfirm
        :title="lang.t('alert.delete')"
        @confirm="menuModel.del"
        confirmButtonType="danger"
        placement="top"
        hideIcon
      >
        <template #reference>
          <el-button type="danger" circle plain>
            <template #icon>
              <i class="iconfont min icon-close-max"></i>
            </template>
          </el-button>
        </template>
      </el-popconfirm>
    </div>
    <Form ref="form" />
  </el-menu>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import menuModel from '../../model/menu'

import Form from './form'

export default {
  components: {
    Form
  },
  setup() {
    // 表单
    const form = ref(null)

    // 加载数据
    menuModel.get()

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      form,
      menuModel
    }
  }
}
</script>